<template>
  <div class="news_child">
    <p class="title ellipsis hover:text-[var(--devui-brand)]">
      {{ props.data.title }}
    </p>
    <p class="desc ellipsis mt-[12px]">
      {{ props.data.desc }}
    </p>
  </div>
</template>

<script lang='ts' setup>
import type { TSpecialList } from '../types/index'

defineOptions({ name: 'News' })
const props = withDefaults(defineProps<{
  data: TSpecialList
}>(), {
  data() {
    return {
      collectNum: 1,
      coverImg: '',
      customDomain: '',
      isAuditing: false,
      name: '',
      sort: 1,
      status: 2,
      id: '',
      desc: '',
      thumb: '',
      externalData: {},
    }
  },
})
</script>

<style scoped lang='scss'>
.news_child {

  padding: 8px 8px;
  .title {
    font-size: 14px;
    transition: all .3s linear;
    font-weight: 600;
    cursor: pointer;
  }

  .desc {
    font-size: 12px;
    color: #9C9DB4;
    cursor: pointer;
  }

  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .count_wrap {
    font-size: 12px;
    color: #9C9DB4;
  }
}
</style>
